<template>
  <div style="line-height:0px">
    <div style="text-align: left;">
      <span style="margin-left: 20px">入园时间：</span>
      <el-date-picker v-model="inTime" value-format="yyyy-MM-dd HH:mm:ss" type="datetimerange" range-separator="至"
        start-placeholder="开始日期" @change="getTimeIn" end-placeholder="结束日期" :unlink-panels="true" clearable
        style="width:230px">
      </el-date-picker>
      <span style="margin-left: 20px">出园时间：</span>
      <el-date-picker v-model="outTime" value-format="yyyy-MM-dd HH:mm:ss" type="datetimerange" range-separator="至"
        start-placeholder="开始日期" @change="getTimeOut" end-placeholder="结束日期" clearable style="width:230px">
      </el-date-picker>
      <!-- <br /> -->
      <span style="margin-left: 20px">车牌号：</span>
      <el-input v-model="page.data.carNum" style="width: 120px" placeholder="请输入车牌号"></el-input>
      <el-button style="margin-left: 15px; margin-top: 15px;" type="primary" icon="el-icon-search" @click="found">查找
      </el-button>
      <el-button style="margin-left: 15px" type="info" icon="el-icon-refresh-right" slot="trigger" @click="reset">重置
      </el-button>

    </div>
    <el-table class="tableBorder" :header-cell-style="{ 'text-align': 'center' }"
      :cell-style="{ 'text-align': 'center' }" :row-style="{ 'height': '20px' }" :data="tableData"
      style="width: 100% ;margin-top: 30px" :stripe="true" :border="true" :highlight-current-row="true" size="mini">
      <el-table-column prop="id" label="进出ID" width="80px" row>
      </el-table-column>
      <el-table-column prop="carNum" label="车牌号">
      </el-table-column>
      <el-table-column prop="inTime" label="入园时间">
      </el-table-column>
      <el-table-column prop="outTime" label="出园时间">
      </el-table-column>
    </el-table>
    <div class="block" style="text-align:center">
      <el-pagination :background="true" @size-change="handleSizeChange" @current-change="handleCurrentChange"
        :current-page="page.pagePlus.current" :page-sizes="page.pagePlus.pagesizes" :page-size="page.pagePlus.size"
        layout="total, sizes, prev, pager, next, jumper" :total="page.pagePlus.total">
      </el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      inTime: ["", ""],
      outTime: ["", ""],
      tableData: [],
      page: {
        data: {
          startInTime: "",
          startOutTime: "",
          endInTime: "",
          endOutTime: "",
          carNum: "",
        },
        pagePlus: {
          current: 1,
          size: 10,
          pagesizes: [10, 20, 50, 100],
          total: 0,
        },
      },
    }
  },
  methods: {
    reset() {
      this.page.data.startInTime = "";
      this.page.data.startOutTime = "";
      this.page.data.endInTime = "";
      this.page.data.endOutTime = "";
      this.page.data.carNum = "";
      this.page.pagePlus.current = 1;
      this.page.pagePlus.size = 10;
      this.inTime = ["", ""];
      this.outTime = ["", ""];
      this.list();
    },
    getTimeIn() {
      if (this.inTime != null) {
        this.page.data.startInTime = this.inTime[0];
        this.page.data.startOutTime = this.inTime[1];
      } else {
        this.page.data.startInTime = "";
        this.page.data.startOutTime = "";
      }
    },
    getTimeOut() {
      if (this.OutTime != null) {
        this.page.data.endInTime = this.outTime[0];
        this.page.data.endOutTime = this.outTime[1];
      } else {
        this.page.data.endInTime = "";
        this.page.data.endOutTime = "";
      }


    },
    found() {
      this.list();
    },

    handleSizeChange(val) {
      this.page.pagePlus.size = val;
      this.list();
    },
    handleCurrentChange(val) {
      this.page.pagePlus.current = val;
      this.list();
    },
    list() {
      this.$axios({
        method: 'post',
        url: "http://127.0.0.1:8080/api/v1/car/carinout/list",
        data: this.page,
      }).then((r) => {
        if (r.data.code == 200) {
          this.tableData = r.data.data.records;
          this.page.pagePlus.total = r.data.data.total;
        }
      })
    },
  },
  created() {
    this.list();
  }
}
</script>